<template>
    <div style="width: 100%">
        <ul class="steps">
            <li :class="item.state==='true'?'active':''  " v-for="item in option">
                <div>{{item.date}}</div>
                <div>
                    <span>{{item.name}}</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            option: Array
        },
        data() {
            return {

            }
        },
        mounted() {

        }
    }
</script>

<style lang="scss" scoped>
    /* 进度条 */
    /* 创建步骤数字计数器 */
    .steps {
        position: relative;
        /*margin-bottom: 30px;*/
        counter-reset: step;
        /*background:#fff;*/
        margin: .05rem 0;
        overflow: hidden;
        margin-left: -.46rem;
        padding-top: .3rem;
    }

    /* 步骤描述 */
    .steps li {
        list-style-type: none;
        font-size: .14rem;
        text-align: center;
        width: 20%;
        position: relative;
        float: left;
        color: #29CAFE;
        /*height:80px;*/
        /*line-height :40px;*/
        padding: .1rem 0;

        & > div {
            font-size: .14rem;
            color: #fff;
            span{
                background: #20568B;
                padding: .07rem;
            }

        }
        & > div:nth-child(2){
            color: #29CAFE;
            margin-top: .1rem;
        }
    }

    /* 步骤数字 */
    .steps li:before {
        display: block;
        content: counter(step); /* 设定计数器内容 */
        counter-increment: step; /* 计数器值递增 */
        width: .1rem;
        height: .1rem;
        background-color: #487CB7;
        line-height: .1rem;
        border-radius: .1rem;
        font-size: 0;
        color: #fff;
        text-align: center;
        font-weight: 600;
        margin: 0 auto .1rem auto;
    }

    /* 连接线 */
    .steps li ~ li:after {
        content: '';
        width: 100%;
        height: .03rem;
        background-color: #487CB7;
        position: absolute;
        left: -48.6%;
        top: .14rem;
        z-index: 0;
    }

    /* 将当前/完成步骤之前的数字及连接线变绿 */
    .steps li.active:before, .steps li.active:after {
        background-color:#30FFF8;
    }
</style>

